<script setup lang='ts'>
  import { onMounted, reactive, ref } from 'vue';
  import { equipApi } from '@/api/controller';
  import { ToastSuccess, Toastloading } from '@/utils/public';
  import userForm from './userForm.vue';
import { ElMessageBox } from 'element-plus';
  const userFormRef = ref()
  const action = reactive({
    list:[] as any[],
  })
  const handleForm = (row:any = {},type='addUser')=>{
    userFormRef.value.openDialog({
      type,
      ...row,
    })
  }
  const handleUserStatus = (row:any = {})=>{
    const { id=0, status } = row
    ElMessageBox.confirm(`确定${['','封禁此系统回收用户','解封此系统回收用户'][status]}吗?`, "提示", {
      confirmButtonText: "确定",
      cancelButtonText: "取消",
      type: "warning",
    }).then(async () => {
      const loading = Toastloading();
      equipApi.updatesysconfig({
        id,
        status:['',2,1][status]
      }).then(()=>{
        ToastSuccess("操作成功!");
        loading.close();
        getList();
      }).catch(()=>{
        loading.close();
      })
    }).catch(() => {});
  }
  const getList = async()=> {
    const loading = Toastloading()
    const res = await equipApi.systemUserList()
    loading.close()
    const { data=[] } = res || {}
    action.list = data
  }
  onMounted(()=>{
    getList()
  })
</script>

<template>
  <div class="xm-content">
    <div class="xm-headTab">
      <div class="labelBox">
        <div class="labelItem">
          <el-button type="primary" @click="handleForm()">新增回收用户</el-button>
        </div>
      </div>
    </div>
    <el-table
      class="xm-TableCenter"
      :data="action.list"
      border>
      <el-table-column min-width="120" prop="user_id" label="user_id" />
      <el-table-column min-width="120" prop="minutes" label="系统回收间隔(分钟)" />
      <el-table-column min-width="120" prop="status" label="状态">
        <template #default="scoped">
          {{ ['','启用','禁用'][scoped.row.status] || scoped.row.status }}
        </template>
      </el-table-column>
      <el-table-column min-width="120" prop="jd_balance" label="剩余金豆" />
      <el-table-column min-width="120" label="操作" >
        <template #default="scoped">
          <el-button type="primary" @click="handleForm(scoped.row,'nums')">增加金豆</el-button>
          <el-button
           :type="['','danger','primary'][scoped.row.status]"
           @click="handleUserStatus(scoped.row)">
           {{ ['','封禁账户','启用账户'][scoped.row.status] }}
          </el-button>
        </template>
      </el-table-column>

    </el-table>
    <userForm ref="userFormRef" @update-list="getList" />
  </div>
</template>